<template>
  <view class="flex-warp">
    <view class="item item1">
      <view>
        <text class="-num">{{ result.count }}</text>
        <text class="-unit">项</text>
      </view>
      <view class="desc">匹配政策条款</view>
    </view>
    <view class="item item2">
      <view>
        <text class="-num">{{ result.expectPolicy }}万</text>
        <text class="-unit">元</text>
      </view>
      <view class="desc">
        <view>预计资助</view>
        <view>(5星)</view>
      </view>
    </view>
    <view class="item item3">
      <view>
        <text class="-num">{{ result.ascensionPolicy }}万</text>
        <text class="-unit">元</text>
      </view>
      <view class="desc">
        <view>提升条件资助</view>
        <view>(4星以下)</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ReportInfoResult } from '@/api/membership/types';
  import { PropType } from 'vue';

  const props = defineProps({
    result: {
      type: Object as PropType<ReportInfoResult>,
      required: true,
    },
  });
</script>

<style lang="scss" scoped>
  .flex-warp {
    display: flex;
    background-color: #fff;
    padding-top: 60rpx;
    padding-bottom: 77rpx;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #333;
      font-size: 23rpx;
      flex: 1;
      .-num {
        font-size: 40rpx;
      }
      .-unit {
        font-size: 27rpx;
        color: #000;
        margin-left: 6rpx;
      }
      .desc {
        padding-top: 33rpx;
        text-align: center;
      }
    }
    .item2 {
      border-left: 2rpx #dddddd solid;
      border-right: 2rpx #dddddd solid;
      .-num {
        color: #c58631;
      }
    }
  }
</style>
